import React, { useEffect, useState } from 'react';
import {
  Avatar, Button, List, Skeleton, Tag, Drawer,
} from 'antd';
import { RadarChartOutlined, PlusSquareOutlined } from '@ant-design/icons';
import Details from './detailsDrawerContent';
import AddIntances from './addIntancesDrawerContent';
import Config from './configDrawerContent';

const results = [
  {
    name: '语音识别服务',
    info: ['实例数：X3', '收缩策略', '粘性会话'],
  },

  {
    name: '人脸识别服务',
    info: ['实例数：X3'],
  },
  {
    name: '图片识别服务',
    info: ['实例数：X2'],
  },
  {
    name: '场景识别服务',
    info: ['实例数：X1', '收缩策略', '粘性会话'],
  },
];

const titleMap = {
  add: '添加实例',
  config: '配置详情',
  detail: '详情',
};

function App() {
  const [open, setOpen] = useState(false);
  const [list, setList] = useState([]);

  useEffect(() => {
    setList(results);
  }, []);

  return (
    <>
      <Drawer
        title={titleMap?.[open]}
        onClose={() => { setOpen(() => false); }}
        open={!!open}
        size="large"
        width={600}
      >
        {open === 'detail' && <Details />}
        {open === 'add' && <AddIntances />}
        {open === 'config' && <Config />}
      </Drawer>
      <List
        className="demo-loadmore-list"
        itemLayout="horizontal"
        header={<h3>产品列表</h3>}
        style={{ padding: '0 25px' }}
        dataSource={list}
        renderItem={(item) => (
          <List.Item
            actions={[
              <a key="list-loadmore-edit" onClick={() => { setOpen('config'); }}>配置详情</a>,
              <a key="list-loadmore-edit" onClick={() => { setOpen('detail'); }}>详情</a>,
              <a key="list-loadmore-more" style={{ color: 'red' }}>
                删除
              </a>,
            ]}
          >
            <Skeleton avatar title={false} loading={item.loading} active>
              <List.Item.Meta
                avatar={(
                  <RadarChartOutlined
                    style={{ fontSize: 36, color: '#5f96f5' }}
                  />
              )}
                title={<div style={{ lineHeight: '32px' }}>{item.name}</div>}
                description={(
                  <>
                    {item.info.map((i) => <Tag color="processing">{i}</Tag>)}
                    <PlusSquareOutlined
                      onClick={() => setOpen('add')}
                      style={{
                        color: '#1677ff', fontSize: '22px', cursor: 'pointer', verticalAlign: 'top',
                      }}
                    />
                  </>
              )}
              />
            </Skeleton>
          </List.Item>
        )}
      />
    </>

  );
}
export default App;
